<template>
  <div class="wrap">
    <div class="stepset">
      <div class="color333 font18"> 发邮件 </div>
    </div>

    <el-form :model="sendMailInfoForm" size="mini" ref="sendMailInfoForm" >
      <el-form-item class="mt30 flex">
        <span class="color333 font16">邮件模板：</span>
        <span class="color333 font16">{{this.sendMailInfoForm.templateName}}</span>
      </el-form-item>
      <el-form-item class="mt30 flex">
        <span class="color333 font16">邮件标题：</span>
        <span class="color333 font16 ">{{this.sendMailInfoForm.mailTitle}}</span>
      </el-form-item>
      <el-form-item class="mt30 txt">
        <span class="color333 font16">邮件内容：</span>
        <span class="font16 color333 lh24" v-html="this.sendMailInfoForm.previewContent"></span>
      </el-form-item>
    </el-form>

    <div class="save t_c mt30">
      <el-button type="primary" @click="handleClose">确定</el-button>
    </div>
  </div>
</template>

<script>
// 自动化营销-----发微信消息组件
export default {
  name: "mailInfo",
  components: {
    
  },
  data() {
    return {
      sendMailInfoForm:{
          tempId:"",
          mailTitle:"",
          previewContent:"",
          templateName:"",
          params:{
            
          },
          testReceiver:""
      },
    };
  },
  props: {
    id:Number,
    nodeInfo: {
      type: Object,
    },
    journeyId: {
      type: String,
      default: '',
    }
  },

  methods: {
    //子关闭 短信模板弹框
    handleClose:function() {
      this.$emit("handleClose", false);
    },
    /**
     * 页面回显
     */
    queryInfo(){
      let that = this;
      this.utils.request.getBranchNodeDetail({branchNodeId: this.nodeInfo.nodeId}, res=>{
        if(res.code == '0000'){
          if(res.data.nodeVariable != null || res.data.nodeVariable != ''){
              //回显邮件
              let data = JSON.parse(res.data.nodeVariable);
              that.sendMailInfoForm = data;
              this.sendMailInfoForm.previewContent = this.sendMailInfoForm.previewContent.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>')
          }
        }
      })
    },
  },

  mounted() {
    this.queryInfo();
  }
};
</script>
<style lang="scss" scoped>
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .el-form-item {
    margin-top: 30px;
  }
  .btns {
    .el-button {
      margin: 0 30px 0 0;
    }
  }
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
  .buttonParm{
    padding: 0 16px !important;
    border-radius: 4px;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    background: #66b1ff;
    border-color: #66b1ff;
    color: #FFF;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }
}
.wd280 {
  width: 240px !important;
}
</style>

